const path = require("path");
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "" : "/",
  // 构建项目生成的目录
  outputDir: process.env.NODE_ENV === "production" ? "dist" : "devDist",
  // 设置语法的自动检测
  lintOnSave: true,

  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        // prependData: `@import "./src/styles/main.scss";`,
        // additionalData: `@import "./src/styles/main.scss";`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        // additionalData: `@import "./src/styles/main.scss";`
      }
    }
  },
  chainWebpack: config => {
    // 设置网页标题
    config.plugin("html").tap(args => {
      args[0].title = "投资管理系统";
      return args;
    });

    // 注册svg图标
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
        include: ["./src/icons"]
      });
  },
  configureWebpack: config => {
    config.resolve = {
      extensions: [".js", ".json", ".vue"],
      alias: {
        "@": path.resolve(__dirname, "./src"),
        "@c": path.resolve(__dirname, "./src/components")
      }
    };
  },

  // webpack-dev-server 相关配置
  devServer: {
    open: false, //编译完成是否打开网页
    host: "0.0.0.0", // 指定使用地址，默认localhost, 0.0.0.0代表可以被外界访问
    port: 8080, //访问端口
    https: false, // 编译失败时，刷新页面
    hot: true, // 开启热加载
    hotOnly: false,
    overlay: {
      // 全屏模式，是否显示脚本错误
      warning: true,
      errors: true
    },
    proxy: {
      // 设置代理
      "/api": {
        target: process.env.VUE_APP_API_HOST,
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          "^/api": ""
        },
        ws: true
      }
    }
  }
};
